<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>胶水回收 - 胶水管理系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="header">
            <div class="logo">
                <i class="fas fa-tint"></i>
                <span>胶水管理系统</span>
            </div>
            <nav class="nav">
                <a href="apply.html" class="nav-item">
                    <i class="fas fa-clipboard-list"></i>
                    <span>胶水申请</span>
                </a>
                <a href="production.html" class="nav-item">
                    <i class="fas fa-industry"></i>
                    <span>胶水房管理</span>
                </a>
                <a href="usage.html" class="nav-item">
                    <i class="fas fa-tools"></i>
                    <span>产线使用</span>
                </a>
                <a href="recycle.html" class="nav-item active">
                    <i class="fas fa-recycle"></i>
                    <span>胶水回收</span>
                </a>
            </nav>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1><i class="fas fa-recycle"></i> 胶水回收</h1>
                <p>扫码回收胶水，记录回收状态，管理胶水生命周期</p>
            </div>

            <!-- 回收扫码区域 -->
            <div class="scan-container">
                <div class="scan-section">
                    <div class="scan-header">
                        <h3><i class="fas fa-qrcode"></i> 胶水回收扫码</h3>
                        <p>请扫描胶水身份ID进行回收</p>
                    </div>
                    
                    <div class="scan-form">
                        <div class="scan-row">
                            <div class="scan-group">
                                <label for="recycleGlueID">胶水身份ID</label>
                                <div class="scan-input-group">
                                    <input type="text" id="recycleGlueID" class="form-control" placeholder="扫描或输入胶水身份ID">
                                    <button class="btn btn-primary" onclick="scanRecycleGlue()">
                                        <i class="fas fa-qrcode"></i> 扫描
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="scan-row">
                            <div class="scan-group">
                                <label for="recycleReason">回收原因</label>
                                <select id="recycleReason" class="form-control">
                                    <option value="">请选择回收原因</option>
                                    <option value="expired">已过期</option>
                                    <option value="damaged">已损坏</option>
                                    <option value="unused">未使用完</option>
                                    <option value="quality">质量问题</option>
                                    <option value="other">其他原因</option>
                                </select>
                            </div>
                            <div class="scan-group">
                                <label for="recycleQuantity">回收数量</label>
                                <input type="number" id="recycleQuantity" class="form-control" min="0.1" step="0.1" value="1">
                            </div>
                        </div>
                        
                        <div class="scan-row">
                            <div class="scan-group">
                                <label for="recycleLocation">回收位置</label>
                                <select id="recycleLocation" class="form-control">
                                    <option value="">请选择回收位置</option>
                                    <option value="胶水房">胶水房</option>
                                    <option value="产线A">产线A</option>
                                    <option value="产线B">产线B</option>
                                    <option value="产线C">产线C</option>
                                    <option value="仓库">仓库</option>
                                </select>
                            </div>
                            <div class="scan-group">
                                <label for="recycleNotes">回收备注</label>
                                <input type="text" id="recycleNotes" class="form-control" placeholder="回收备注（可选）">
                            </div>
                        </div>
                        
                        <div class="scan-actions">
                            <button class="btn btn-primary" onclick="confirmRecycle()">
                                <i class="fas fa-check"></i> 确认回收
                            </button>
                            <button class="btn btn-danger" onclick="resetRecycleForm()">
                                <i class="fas fa-times"></i> 重置
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="scan-info">
                    <div class="info-card">
                        <h4><i class="fas fa-info-circle"></i> 回收说明</h4>
                        <ul>
                            <li>扫描胶水身份ID，系统自动识别胶水信息</li>
                            <li>选择回收原因和填写回收数量</li>
                            <li>选择回收位置，便于后续处理</li>
                            <li>填写备注信息，记录特殊情况</li>
                            <li>确认回收完成记录</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 回收统计 -->
            <div class="stats-container">
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-recycle"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">25</div>
                        <div class="stat-label">今日回收</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">8</div>
                        <div class="stat-label">过期回收</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-times-circle"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">3</div>
                        <div class="stat-label">损坏回收</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">85%</div>
                        <div class="stat-label">回收率</div>
                    </div>
                </div>
            </div>

            <!-- 回收记录 -->
            <div class="table-container">
                <div class="table-header">
                    <h3><i class="fas fa-history"></i> 回收记录</h3>
                </div>
                
                <!-- 筛选器 -->
                <div class="filter-container" style="padding: 16px 24px; background: #f8f9fa;">
                    <div class="filter-item">
                        <label>回收原因：</label>
                        <select id="reasonFilter">
                            <option value="">全部原因</option>
                            <option value="expired">已过期</option>
                            <option value="damaged">已损坏</option>
                            <option value="unused">未使用完</option>
                            <option value="quality">质量问题</option>
                            <option value="other">其他原因</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>回收位置：</label>
                        <select id="locationFilter">
                            <option value="">全部位置</option>
                            <option value="胶水房">胶水房</option>
                            <option value="产线A">产线A</option>
                            <option value="产线B">产线B</option>
                            <option value="产线C">产线C</option>
                            <option value="仓库">仓库</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>时间范围：</label>
                        <select id="timeFilter">
                            <option value="today">今日</option>
                            <option value="week">本周</option>
                            <option value="month">本月</option>
                            <option value="all">全部</option>
                        </select>
                    </div>
                </div>
                
                <table>
                    <thead>
                        <tr>
                            <th>回收时间</th>
                            <th>胶水ID</th>
                            <th>胶水品类</th>
                            <th>胶水品号</th>
                            <th>回收原因</th>
                            <th>回收数量</th>
                            <th>回收位置</th>
                            <th>回收人员</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2024-01-15 16:30</td>
                            <td>GL-2024-001</td>
                            <td>环氧树脂胶</td>
                            <td>EP-001</td>
                            <td><span class="status-badge status-expired">已过期</span></td>
                            <td>0.8支</td>
                            <td>产线A</td>
                            <td>张三</td>
                            <td>正常过期回收</td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="viewRecycleDetails('GL-2024-001')">
                                    <i class="fas fa-eye"></i> 查看详情
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>2024-01-15 15:45</td>
                            <td>GL-2024-002</td>
                            <td>UV胶</td>
                            <td>UV-001</td>
                            <td><span class="status-badge status-expired">已过期</span></td>
                            <td>0.5支</td>
                            <td>产线B</td>
                            <td>李四</td>
                            <td>正常过期回收</td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="viewRecycleDetails('GL-2024-002')">
                                    <i class="fas fa-eye"></i> 查看详情
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>2024-01-15 14:20</td>
                            <td>GL-2024-003</td>
                            <td>硅胶</td>
                            <td>SI-001</td>
                            <td><span class="status-badge status-pending">未使用完</span></td>
                            <td>0.3支</td>
                            <td>产线C</td>
                            <td>王五</td>
                            <td>工单完成，剩余回收</td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="viewRecycleDetails('GL-2024-003')">
                                    <i class="fas fa-eye"></i> 查看详情
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>2024-01-15 13:15</td>
                            <td>GL-2024-004</td>
                            <td>环氧树脂胶</td>
                            <td>EP-002</td>
                            <td><span class="status-badge status-expired">已损坏</span></td>
                            <td>1.0支</td>
                            <td>胶水房</td>
                            <td>赵六</td>
                            <td>包装破损，无法使用</td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="viewRecycleDetails('GL-2024-004')">
                                    <i class="fas fa-eye"></i> 查看详情
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <!-- 分页 -->
                <div class="pagination">
                    <a href="#" class="page-item active">1</a>
                    <a href="#" class="page-item">2</a>
                    <a href="#" class="page-item">3</a>
                    <a href="#" class="page-item">下一页</a>
                </div>
            </div>

            <!-- 回收分析 -->
            <div class="table-container">
                <div class="table-header">
                    <h3><i class="fas fa-chart-bar"></i> 回收分析</h3>
                </div>
                <div style="padding: 24px;">
                    <div class="analysis-grid">
                        <div class="analysis-item">
                            <h4>回收原因分布</h4>
                            <div class="analysis-chart">
                                <div class="chart-bar">
                                    <span class="chart-label">已过期</span>
                                    <div class="chart-bar-fill" style="width: 60%; background-color: #dc3545;"></div>
                                    <span class="chart-value">60%</span>
                                </div>
                                <div class="chart-bar">
                                    <span class="chart-label">未使用完</span>
                                    <div class="chart-bar-fill" style="width: 25%; background-color: #ffc107;"></div>
                                    <span class="chart-value">25%</span>
                                </div>
                                <div class="chart-bar">
                                    <span class="chart-label">已损坏</span>
                                    <div class="chart-bar-fill" style="width: 10%; background-color: #6c757d;"></div>
                                    <span class="chart-value">10%</span>
                                </div>
                                <div class="chart-bar">
                                    <span class="chart-label">其他</span>
                                    <div class="chart-bar-fill" style="width: 5%; background-color: #17a2b8;"></div>
                                    <span class="chart-value">5%</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="analysis-item">
                            <h4>回收位置分布</h4>
                            <div class="analysis-chart">
                                <div class="chart-bar">
                                    <span class="chart-label">产线A</span>
                                    <div class="chart-bar-fill" style="width: 40%; background-color: #007bff;"></div>
                                    <span class="chart-value">40%</span>
                                </div>
                                <div class="chart-bar">
                                    <span class="chart-label">产线B</span>
                                    <div class="chart-bar-fill" style="width: 30%; background-color: #28a745;"></div>
                                    <span class="chart-value">30%</span>
                                </div>
                                <div class="chart-bar">
                                    <span class="chart-label">产线C</span>
                                    <div class="chart-bar-fill" style="width: 20%; background-color: #ffc107;"></div>
                                    <span class="chart-value">20%</span>
                                </div>
                                <div class="chart-bar">
                                    <span class="chart-label">胶水房</span>
                                    <div class="chart-bar-fill" style="width: 10%; background-color: #6c757d;"></div>
                                    <span class="chart-value">10%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="scripts/main.js"></script>
    <script>
        // 扫描回收胶水
        function scanRecycleGlue() {
            // 模拟扫描过程
            alert('请将胶水身份ID对准扫描器');
            // 这里可以添加实际的扫描逻辑
            setTimeout(() => {
                document.getElementById('recycleGlueID').value = 'GL-2024-005';
                alert('胶水扫描成功：GL-2024-005');
                
                // 模拟获取胶水信息
                document.getElementById('recycleQuantity').value = '0.7';
                document.getElementById('recycleReason').value = 'unused';
            }, 1000);
        }

        // 确认回收
        function confirmRecycle() {
            const glueID = document.getElementById('recycleGlueID').value;
            const reason = document.getElementById('recycleReason').value;
            const quantity = document.getElementById('recycleQuantity').value;
            const location = document.getElementById('recycleLocation').value;
            
            if (!glueID || !reason || !quantity || !location) {
                alert('请填写完整的回收信息');
                return;
            }
            
            if (confirm(`确认回收胶水 ${glueID}，回收原因：${reason}，回收数量：${quantity}？`)) {
                // 这里可以添加实际的回收确认逻辑
                alert('回收记录已保存！');
                resetRecycleForm();
                
                // 刷新回收记录表格
                // 这里可以添加实际的刷新逻辑
            }
        }

        // 重置回收表单
        function resetRecycleForm() {
            document.getElementById('recycleGlueID').value = '';
            document.getElementById('recycleReason').value = '';
            document.getElementById('recycleQuantity').value = '1';
            document.getElementById('recycleLocation').value = '';
            document.getElementById('recycleNotes').value = '';
        }

        // 查看回收详情
        function viewRecycleDetails(glueId) {
            alert(`查看胶水 ${glueId} 的回收详情`);
            // 这里可以添加实际的查看详情逻辑
        }

        // 筛选器功能
        document.getElementById('reasonFilter').addEventListener('change', function() {
            console.log('回收原因筛选:', this.value);
            // 这里可以添加实际的筛选逻辑
        });

        document.getElementById('locationFilter').addEventListener('change', function() {
            console.log('回收位置筛选:', this.value);
            // 这里可以添加实际的筛选逻辑
        });

        document.getElementById('timeFilter').addEventListener('change', function() {
            console.log('时间范围筛选:', this.value);
            // 这里可以添加实际的筛选逻辑
        });

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('胶水回收页面加载完成');
            // 这里可以添加实际的初始化逻辑
        });
    </script>
</body>
</html>
